<template>
    <a-layout-header class="header">
        <div class="top-left-nav">
            <div class="nav-item" @click="onClickFold">
                <a-icon
                    class="trigger"
                    :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                />
            </div>
            <div class="nav-item" @click="onClickFold">
                <a-icon type="github" />
            </div>
            <div class="nav-item" @click="lock=!lock">
                <a-icon :type="lock?'unlock':'lock'" theme="filled"/>
            </div>
        </div>

        <div class="top-right">
            <div class="nav-item" @click="lock=!lock">
                <a-badge count="5" >
                    <a-icon type="bell" style="font-size: 20px;" />
                </a-badge>
            </div>
            <div class="nav-item" @click="lock=!lock">
                <a-icon type="setting" theme="filled"/>
            </div>
            <div class="nav-item" @click="showPopuper=true">
                <a-popover placement="bottom" v-model="showPopuper">
                    <template slot="content">
                        <a-menu  :selectable="false">
                            <a-menu-item key="1"><a-icon type="user" />个人中心</a-menu-item>
                            <a-menu-item key="2"><a-icon type="user" />个人设置</a-menu-item>
                            <a-divider />
                            <a-menu-item key="3"><a-icon type="user" />退出登录</a-menu-item>
                        </a-menu>
                    </template>
                    <a-avatar  icon="user"/>
                    Admin
                </a-popover>
            </div>
        </div>

    </a-layout-header>
</template>

<script>
    import {mapState, mapMutations} from 'vuex';

    export default {
        name: "Header",
        data() {
            return {
                lock: false,
                showPopuper: false,
            }
        },
        computed: {
            ...mapState('index', {
                collapsed: (state)=>state.collapsed,
            }),
        },
        methods: {
            ...mapMutations('index',{
                setCollapsed: 'setCollapsed',
            }),
            onClickFold(){
                let {collapsed} = this;
                this.setCollapsed(!collapsed);
            },
        },
    }
</script>

<style scoped>
    .header{
        background: #fff;
        padding: 0 20px;
        display: flex;
        flex-direction: row;
        box-shadow: 0 1px 3px rgba(0,0,0,.1);
        z-index: 999;
    }
    .trigger{

    }

    /*顶部左侧菜单按钮*/
    .top-left-nav{
        width: auto;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .nav-item{
        height: auto;
        padding: 0px 15px;
        margin-right: 10px;
        box-sizing: border-box;
        cursor: pointer;
        transition: .2s;
    }
    .nav-item:hover{
        background-color: hsla(0,0%,50%,.2);
    }
    .nav-item:active{
        transform: scale(1.1);
    }

    /*右侧内容*/
    .top-right{
        flex: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
    }
</style>
